<template>
  <div class="page-container">
    <div class="banner-wrapper">
      <img src="https://img.bc.haodanku.com/cms/tb_subsidies_banner.png" alt="" class="free-banner">
    </div>
    <div class="fixed-box">
      <div class="search-box">
        <van-search v-model="searchValue" placeholder="输入商品名称" show-action>
          <template #action>
            <div @click="onSearch" class="search-btn">搜索</div>
          </template>
        </van-search>
      </div>
      <div class="category">
        <van-tabs v-model="activeTab">
          <van-tab :title="item.category_name" v-for="item in category" :key="item.category_id"></van-tab>
        </van-tabs>
      </div>
      <div class="page-content">
        <van-list
          class="lists"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          @load="getList"
        >
          <div class="goods-card" v-for="(goods, index) in list" :key="index">
            <div class="img-box cover">
              <img class="cover-img" :src="goods.itempic" alt="">
              <div class="icon">
                <img :src="goods.brand_pic" alt="" class="brand">
                <img src="http://img-haodanku-com.cdn.fudaiapp.com/FuoKw0VnR3XNQoNmcGXIQOe8qssX" alt="" class="bg">
                <div class="text">品牌正品</div>
              </div>
            </div>
            <div class="detail">
              <div class="title">
                <img src="https://img.bc.haodanku.com/cms/logo_jhs.png" alt="">
                <span class="van-ellipsis">{{goods.itemtitle}}</span>
              </div>
              <div class="row row-2">
                <img src="https://gw.alicdn.com/tfs/TB1CvN50KH2gK0jSZJnXXaT1FXa-167-42.png" alt="">
              </div>
              <div class="row row-3">
                <img src="http://img-haodanku-com.cdn.fudaiapp.com/FtjSkLubVJ7qtA0cbVqu0dp_ipul" alt="">
                <span>2元补贴券</span>
              </div>
              <div class="footer">
                <div class="price">
                  <div class="discount">补贴券后价￥<strong>{{item}}</strong></div>
                  <div class="origin"></div>
                </div>
              </div>
              <div class="btn-block">
                <div class="btn-order">
                  <span class="operation">立即购买</span>
                </div>

              </div>
            </div>
          </div>

        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { Search } from 'vant'
  import { Tab, Tabs, List } from 'vant'

  Vue.use(Tab)
  Vue.use(Tabs)
  Vue.use(List)
  Vue.use(Search)
  import { cash_subsidy_goods } from '@/api/hdk'

  export default {
    name: 'Tb_subsidies',
    data() {
      return {
        searchValue: '',
        category: [],
        activeTab: 0,
        loading: false,
        finished: false,
        error: false,
        list: [],
        listQuery: {
          min_id: 1,
          min_size: 10
        }
      }
    },
    methods: {
      onSearch() {
      },
      getList() {
        let req = {
          min_id: this.listQuery.min_id,
          min_size: this.listQuery.min_size,
          keyword: this.searchValue,
          category_id: this.category[this.activeTab] ? this.category[this.activeTab].category_id : 0
        }
        cash_subsidy_goods(req).then(res => {
          console.log(res.data)
          this.category = res.data.category || []
          let list = res.data.data || []
          this.list = this.list.concat(list)
        }).finally(() => {
          this.loading = false
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 540PX;
    background: #fe2e2e;
    padding-bottom: 120px;
    margin: 0 auto;
    box-sizing: border-box;
    font-size: 32px;
    box-shadow: 0 0 8px 8px rgb(0 0 0 / 10%);

    .banner-wrapper {
      height: 310px;
      min-height: 310px;

      img {
        display: block;
        width: 100%;
      }
    }

    .search-box {
      margin: 24px 0 0;
      padding: 0 24px;

      /deep/
      .van-search {
        padding-top: 4px;
        padding-bottom: 4px;
        padding-right: 4px;
        height: 72px;
        background: #fff;
        border-radius: 10px;

        .van-search__content {
          padding-left: 0;
          background-color: #fff;
        }

        .van-search__action {
          ine-height: .64rem;
          height: 100%;
          width: 110px;
          background: linear-gradient(90deg, #ff4f71, #fabe52);
          border-radius: 10px;
          text-align: center;
          font-size: 26px;
          color: #fff;
        }
      }
    }

    .page-content {
      flex: 1;
      padding: 0;
      .lists {
        width: 710px;
        margin: 0 auto;

        .goods-card {
          display: flex;
          align-items: center;
          position: relative;
          margin-bottom: 20px;
          padding: 10px 16px;
          width: 710px;
          height: 252px;
          background: #fff;
          box-shadow: 0 5px 20px 0 rgb(0 0 0 / 10%);
          border-radius: 10px;

          .cover {
            flex: 0 0 230px;
            position: relative;
            margin-right: 20px;
            .cover-img {
              display: block;
              width: 230px;
              height: 230px;
              border-radius: 10px;
              filter: brightness(.95);
            }

            .icon {
              position: absolute;
              top: 0;
              left: 0;
              width: 88px;
              height: 85px;
              .brand {
                position: absolute;
                top: 4px;
                left: 4px;
                width: 80px;
                height: 48px;
              }
              .bg {
                position: relative;
                z-index: 1;
                height: auto;
                max-width: 100%;
              }
              .text {
                position: absolute;
                z-index: 1;
                bottom: 9px;
                left: 0;
                font-size: 18px;
                font-weight: 800;
                color: #fff;
                width: 100%;
                text-align: center;
              }
            }
          }
          .detail {
            flex: 1;
            overflow: hidden;
            height: 230px;
            display: flex;
            flex-direction: column;
            .title {
              display: flex;
              align-items: center;
              font-size: 26px;
              font-weight: 500;
              color: #333;
            }
          }
        }
      }
    }

    .footer-share {
      display:flex;
      justify-content:center;
      align-items:center;
      position:fixed;
      z-index:10;
      bottom:0;
      margin:auto;
      width: 750px;
      height: 127px;
      background:#e30b0b;
      box-shadow:0 -3px 24px 0 rgba(237, 49, 8, .66);
      border-radius: 30px 30px 0 0
    }

  }
</style>
